<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="author" content="Mr.郭/QQ:1007694939">
    <title>会员注册</title>
    <!--引入Font Awesome字体库样式表-->
    <link rel="stylesheet" href="/static/css/font-awesome.min.css"
          tppabs="http://demo.demohuo.top/modals/63/6398/demo//static/css/font-awesome.min.css">
    <!--引入guojian.min.css组件样式表-->
    <link rel="stylesheet" href="/static/css/guojian.min.css"
          tppabs="http://demo.demohuo.top/modals/63/6398/demo//static/css/guojian.min.css">
    <!--引入style.css自定义样式表-->
    <link rel="stylesheet" href="/static/css/style.css"
          tppabs="http://demo.demohuo.top/modals/63/6398/demo//static/css/style.css">
    <script src="/static/js/jquery-1.12.4.min.js"></script>
    <script>
        $.ajaxSetup({
            data: {csrfmiddlewaretoken: '{{ csrf_token }}'}
        })
    </script>
</head>

<body>

<div class="gj-dlzc">
    <h3><img src="/static/picture/logo2.png"
             tppabs="http://demo.demohuo.top/modals/63/6398/demo//static/picture/logo2.png" alt=""></h3>
    <h5>会员绑定:</h5>
    <form action="" method="post">
        <input type="hidden" name="referer" value="">
        <table cellpadding="0" cellspacing="1">
            <input type="hidden" name="access_token" id="token" value="{{ access_token }}">
            <input type="text" name="username" id="username" onblur="Name()" value="" placeholder="请输入用户名">
            <span id="span_name">请输入5-20个字符</span>
            <input type="text" name="email" id="email" onblur="Email()" value="" placeholder="请输入e-mail">
            <span id="span_email">如jack@163.com</span>
            <input type="password" name="password" id="password" onblur="Password()" value="" placeholder="请输入密码">
            <span id="span_pwd">请输入8-20个字符</span>
            <input type="password" name="password2" id="password2" onblur="Password2()" value="" placeholder="请再次输入密码">
            <span id="span_pwd2">请输入8-20个字符</span>
            <input type="text" name="code" id="code" value="" placeholder="验证码">
            <div class="gjdl-zc">
                <img src=""
                     tppabs="http://demo.demohuo.top/modals/63/6398/demo//static/picture/code.jpg"
                     id="captcha_img" title="看不清，换一张">
                <button type="button" name="dosubmit" id="register" value="同意注册">立即注册</button>
            </div>
        </table>
    </form>
    <div class="gjdl-sx">
        <a href="init.html" tppabs="http://demo.demohuo.top/modals/63/6398/demo/init.html" role="button"
           target="_blank">忘记密码？</a>
        <a href="register.html" tppabs="http://demo.demohuo.top/modals/63/6398/demo/register.html"><i class="fa fa-user"
                                                                                                      aria-hidden="true"></i>
            免费注册</a>
        <a href="qq_login.html" tppabs="http://demo.demohuo.top/modals/63/6398/demo/qq_login.html"><i class="fa fa-qq"
                                                                                                      aria-hidden="true"></i>
            QQ登录</a>
    </div>
    <a href="index.html" tppabs="http://demo.demohuo.top/modals/63/6398/demo/index.html" class="fan">返回首页</a>
    <p>Powered by YzmCMS</p>
</div>


<script type="text/javascript">
    //一开始 就请求一次验证码
    var id = Math.random();
    $("#captcha_img").prop('src', "{{ url("verifications:img_code") }}?id=" + Math.random());

    //点击图片 修改验证码 其实就是重新请求
    $("#captcha_img").click(function () {
        var id = Math.random();
        //修改请求路径后面的参数，每次不一样，这样就可以重新请求图片了
        $(this).prop('src', "{{ url("verifications:img_code") }}?id=" + Math.random())
    });
    {#var uuid = document.getElementById("captcha_img").src;#}
    {#alert(uuid);#}
    $('#register').click(function () {
        $.ajax({
            url: "/oauth_callback/",
            type: "post",
            dataType: 'json',
            {#headers: {"X-CSRFToken": $.cookie('csrftoken')},#}
            data: {
                username: $("#username").val(),
                email: $("#email").val(),
                password: $("#password").val(),
                password2: $("#password2").val(),
                code: $("#code").val(),
                uuid: document.getElementById("captcha_img").src.split('=')[1],
                access_token: $('#token').val()
            },
            success: function (data) {
                if (data.code_s == 0) {
                    window.location = '/'
                } else {
                    alert(data.errmsg);
                    window.location = '/oauth_callback/'
                }
                {#$(".ret").val(data)#}
            }
        })
    });

    {#function register() {#}
    {#    $.ajax({#}
    {#        type: "POST",//方法类型#}
    {#        dataType: "json",//预期服务器返回的数据类型#}
    {#        url: "/register/",//url#}
    {#        data: $('#form1').serialize(),#}
    {#        success: function (result) {#}
    {#            console.log(result);//打印服务端返回的数据(调试用)#}
    {#            if (result.status == 200) {#}
    {#                alert(result.data);#}
    {#            }#}
    {#            ;#}
    {#        },#}
    {#    });#}
    {##}
    {# }#}


    function Name() {
        //验证姓名
        var name = document.getElementById("username").value; //获取你所填写的信息
        var nameReg = /^[0-9a-zA-Z_]{5,20}$/;  //定义约束,要求输入2到6个中文
        if (!nameReg.test(name)) {   //判断
            var t = span_name.innerHTML = "用户名最少八位!"; //输入不合法，则显示提示信息
            return false;
        } else {
            span_name.innerHTML = "格式正确"; //验证通过后提示
            return true;
        }
    }

    function Password() {
        //密码
        var pwd = document.getElementById("password").value;
        var reg = /^[\d\w]{8,20}$/;
        if (!reg.test(pwd)) {
            span_pwd.innerHTML = "请输入5-20以内数字、字母或组合密码";
        } else {
            span_pwd.innerHTML = "格式正确";
        }
    }

    function Password2() {
        //确认密码
        var pwd = document.getElementById("password").value;
        var pwd2 = document.getElementById("password2").value;
        if (pwd != pwd2) {
            span_pwd2.innerHTML = "两次输入不一致";
        } else {
            span_pwd2.innerHTML = "格式正确";
        }
    }

    function Email() {
        //邮箱验证
        var email = document.getElementById("email").value;
        var reg1 = /^[a-z0-9][\w\.\-]*@[a-z0-9\-]+(\.[a-z]{2,5}){1,2}$/;
        if (!reg1.test(email)) {
            span_email.innerHTML = "错误!如:jack@163.com";
        } else {
            span_email.innerHTML = "格式正确";
        }
    }

</script>
</body>

</html>